<template>
  <div class="article-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功" style="padding-bottom: 50px;">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="已加载全部"
        @load="onLoad"
        :immediate-check="false"
        class="list"
      >
        <van-cell-group>
          <van-cell v-for="item in dataList" :key="item.id" is-link @click="handleDetail(item)" label-class="label" title-class="title">
            <template #title>
              <span class="ti">
                <!-- <van-tag class="icon" v-if="item.isTop" type="success"><svg-icon icon-class="top" />置顶</van-tag>
                <van-tag class="icon" v-if="item.isHot" type="danger"><svg-icon icon-class="hot" />热门</van-tag> -->
                {{item.title}}
              </span>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import service from '@/utils/request.js'
export default {
  props: ['listType', 'title'],
  data() {
    return {
      dataList: [],
      loading: false,
      finished: false,
      refreshing: false,
      searchData: {
        pageInt: 1,
        pageSize: 10,
        listType: this.listType,
        title: ''
      },
    }
  },
  watch: {
    title (val) {
      this.searchData.title = val
    }
  },
  mounted() {
    // this.getList()
  },
  methods: {
    getList() {
      service({
        url: '',
        method: 'get',
        params: this.searchData
      }).then(re => {
        this.dataList.push.apply(this.dataList, re.data.list)

        this.loading = false
        this.refreshing = false

        if (this.dataList.length >= re.data.total) {
          this.finished = true
        } else {
          this.finished = false
        }
      })
    },
    onLoad() {
      // debugger
      if (this.refreshing) {
        return
      }
      this.searchData.pageInt++
      this.getList()
    },
    handleDetail(item) {
      // this.$router.push({path: '/activityDetail', query: {id: item.id}})
    },
    
    onRefresh() {
      // debugger
      this.dataList = []
      this.searchData.pageInt = 1
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.getList();
    },
  }
}
</script>
<style lang="scss" scoped>

.article-list {
  // padding-top: 7px;
  .vpr {
    min-height: calc(100vh - 100px);
  }
  :deep(.label) {
    // width: 200%;
    .con {
      display: inline-block;
      margin-right: 10px;
      font-weight: 500;
    }
  }
  :deep(.title) {

    .ti {
      font-size: 16px;
      display: -webkit-box;
      -webkit-line-clamp:2;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
    }
    .icon {
      display: inline-block;
      margin: 0 2px;
    }
    // font-weight: 600;/
  }
}
</style>